<template>
  <div class="tree-select-container">
    <h4>单选/多选下拉树</h4>
    <el-radio-group style="margin-right: 12px;" v-model="singleOrMulti" size="mini">
      <el-radio-button label="single">单选</el-radio-button>
      <el-radio-button label="multiple">多选</el-radio-button>
    </el-radio-group>

    <base-tree-select
      v-model="treeSelectValue"
      size="mini"
      :data="getData"
      :filterable="true"
      :multiple="singleOrMulti === 'multiple'"
      :defaultExpandAll="true"
      :defaultProps="defaultProps"
      @change="treeSelectChange"
      @select="onTreeSelect"
    ></base-tree-select>
  </div>
</template>

<script>
import BaseTreeSelect from '@/components/base/tree-select';

export default {
  name: 'tree-select-example',
  components: { BaseTreeSelect },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      treeSelectValue: [],
      singleOrMulti: 'single',
      getData: [],
    };
  },

  watch: {
    singleOrMulti: {
      handler(val) {
        this.treeSelectValue = val === 'single' ? '' : [];
      },
      immediate: true,
    },
  },

  created() {
    this.getData = [{
      'id': '-1',
      'name': '前置库系统',
      'pid': null,
      'children': [
        {
          'id': '1',
          'name': 'Mysql',
          'pid': '-1',
          'children': [
            {
              'id': '021d75b2eea64d579effd98fcf173c1c',
              'name': 'mysql连接19',
              'pid': '1',
              'children': null,
            },
            {
              'id': 'dcde763b6fbf4c24af3eb8c419405c7f',
              'name': 'xp_制作映射表数据',
              'pid': '1',
              'children': null,
            },
            {
              'id': 'c5868ea98e574c10a6396197d8ea0be8',
              'name': 'SOURCEMySql',
              'pid': '1',
              'children': null,
            },
            {
              'id': 'c7778794bd1f4c24a87bd8384846945d',
              'name': 'fd',
              'pid': '1',
              'children': null,
            },
            {
              'id': '5206c716b9e34ebcb6d18135a29012c7',
              'name': 'cx',
              'pid': '1',
              'children': null,
            },
            {
              'id': 'ec358fba11d44d15a96276da2d8c92b6',
              'name': 'local12345',
              'pid': '1',
              'children': null,
            },
            {
              'id': '08a1d89a54e64c98ba3dfc4c56de70d8',
              'name': 'fd2',
              'pid': '1',
              'children': null,
            },
            {
              'id': '85a3bace64bf49c49997c89e976c1797',
              'name': 'fd1',
              'pid': '1',
              'children': null,
            },
            {
              'id': '044bc4a61dc945079592ef6b119f5611',
              'name': 'xwscon',
              'pid': '1',
              'children': null,
            },
            {
              'id': '2b2add5ab7624561a89e023f1526df4e',
              'name': 'order',
              'pid': '1',
              'children': null,
            },
            {
              'id': 'cb200d034acf4ea6b729b0b17820b5ee',
              'name': '206fd',
              'pid': '1',
              'children': null,
            },
            {
              'id': '98ecb1222d9e4c1f9a5db30c44875b8e',
              'name': 'CJY_CS',
              'pid': '1',
              'children': null,
            },
            {
              'id': '5edfc7e8638845128e44f2a4da7de7eb',
              'name': '测试数值类型',
              'pid': '1',
              'children': null,
            },
          ],
        },
        {
          'id': '2',
          'name': 'Oracle',
          'pid': '-1',
          'children': [
            {
              'id': 'a3b7f6eec7134de8b85bbd9dc57d07c5',
              'name': 'local',
              'pid': '2',
              'children': null,
            },
            {
              'id': '4b80404a54d54812bb3409ddf21442ac',
              'name': 'bzk',
              'pid': '2',
              'children': null,
            },
            {
              'id': '5610963be596416a9deb83ec32a16f19',
              'name': 'by',
              'pid': '2',
              'children': null,
            },
            {
              'id': 'ead9bd5004b44e8ba791bcb2511d0b11',
              'name': 'gw测试',
              'pid': '2',
              'children': null,
            },
            {
              'id': '9d717d68fbe141baa8c8380fa52bc51d',
              'name': 'ORA123',
              'pid': '2',
              'children': null,
            },
            {
              'id': '739a330fdbba4d7ea9378ec169c30e91',
              'name': '206ORA',
              'pid': '2',
              'children': null,
            },
            {
              'id': 'fb48a2e3177e4c4a910a7a0c81c3e9ac',
              'name': 'xp_采集流程',
              'pid': '2',
              'children': null,
            },
            {
              'id': '197030e0295c4546ad3087da9c312da2',
              'name': '测试大小写',
              'pid': '2',
              'children': null,
            },
            {
              'id': 'a9fad7c393b74103ba3beea7719c90e2',
              'name': 'xp_数据源配置',
              'pid': '2',
              'children': null,
            },
            {
              'id': '34ed62284e624bb0a4ae756fef82c9de',
              'name': 'oracle连接',
              'pid': '2',
              'children': null,
            },
            {
              'id': '65f4ea98c9de4f6daa7693d2fd0ab43c',
              'name': '206123',
              'pid': '2',
              'children': null,
            },
            {
              'id': '7d72b8e291464d129c95592752f839ce',
              'name': 'MT18',
              'pid': '2',
              'children': null,
            },
            {
              'id': '0c6acdf12d554d6ea39d986c596bc4d2',
              'name': '监控测试',
              'pid': '2',
              'children': null,
            },
            {
              'id': '9724796eb3aa45baa225c936e549bd81',
              'name': 'SOURCE2',
              'pid': '2',
              'children': null,
            },
            {
              'id': '174987a5a60b45b5beedd088dd42a02a',
              'name': 'SunOrcl',
              'pid': '2',
              'children': null,
            },
            {
              'id': '9899e04067554df69c67cf5b196e98b7',
              'name': 'by1',
              'pid': '2',
              'children': null,
            },
            {
              'id': 'd314fbad49d14e05a4279fc4ccb4ce66',
              'name': 'MT',
              'pid': '2',
              'children': null,
            },
            {
              'id': 'c8cbeff921e547e483596074a9e324fb',
              'name': 'gw_bzk',
              'pid': '2',
              'children': null,
            },
            {
              'id': '45e29dc086b544678e9125a1c2f0e89b',
              'name': 'YGH',
              'pid': '2',
              'children': null,
            },
            {
              'id': '5f21d117c256418a801eae9ee27d8cc3',
              'name': 'CHATESTU',
              'pid': '2',
              'children': null,
            },
            {
              'id': 'e29a448c8c4c4e37a75f64ad87479cfd',
              'name': 'MT041201',
              'pid': '2',
              'children': null,
            },
            {
              'id': '79802451f0bb4a0f9918d24cbb3df478',
              'name': 'MT0415',
              'pid': '2',
              'children': null,
            },
            {
              'id': '4066e261f0bd4aab94880080594f2f42',
              'name': 'LOCS',
              'pid': '2',
              'children': null,
            },
            {
              'id': '63c531c5ec30436bb83c3f153bf4ea04',
              'name': 'bzk2',
              'pid': '2',
              'children': null,
            },
            {
              'id': '5269f15244b84074b60789a54d839ebe',
              'name': 'GB',
              'pid': '2',
              'children': null,
            },
            {
              'id': 'f76d9389e35d40e7ba4b9d5604f9821e',
              'name': 'GW测试',
              'pid': '2',
              'children': null,
            },
            {
              'id': '87c3ccb1d9224972901e1cea2fee88a8',
              'name': 'orcl202',
              'pid': '2',
              'children': null,
            },
            {
              'id': 'a9cb35c1e9564ac88a88b2aef38aeafb',
              'name': '测试1',
              'pid': '2',
              'children': null,
            },
            {
              'id': '30b36c6022834b4c8fbba6b1400f7e85',
              'name': 'TEST_SUB',
              'pid': '2',
              'children': null,
            },
            {
              'id': '4f8f187bc8e046ccb9c0afaa2e30fa6b',
              'name': 'XP_DRI',
              'pid': '2',
              'children': null,
            },
            {
              'id': '47b79c6e096248e18a51568d763e9ac5',
              'name': 'ORCLCHA',
              'pid': '2',
              'children': null,
            },
            {
              'id': '27af4fdba1df477295f5978ca6f0704c',
              'name': 'XP_订阅分发1',
              'pid': '2',
              'children': null,
            },
            {
              'id': '2224cfbd964e444d96acddc404622491',
              'name': 'XP_订阅分发2',
              'pid': '2',
              'children': null,
            },
          ],
        },
        {
          'id': '10',
          'name': 'DM',
          'pid': '-1',
          'children': [
            {
              'id': '362eede69f654260b891d1a9ac61cc68',
              'name': '达梦连接',
              'pid': '10',
              'children': null,
            },
            {
              'id': '8331b61efdca4c82a183c69da90d5099',
              'name': '达梦AAA',
              'pid': '10',
              'children': null,
            },
            {
              'id': '65eb1c3012584d9e865d2f0447fd5eb0',
              'name': 'zb',
              'pid': '10',
              'children': null,
            },
            {
              'id': '37562043808646709b003badbdeab8e5',
              'name': 'bzk1',
              'pid': '10',
              'children': null,
            },
            {
              'id': 'b39484a1f6654c6ab5c2bac8763e652e',
              'name': '达梦GW',
              'pid': '10',
              'children': null,
            },
            {
              'id': '0d905fdf73a94948a91406bc508b607d',
              'name': 'DM数值类型',
              'pid': '10',
              'children': null,
            },
            {
              'id': '10132ff9686145929a24de9b5c9c6eb4',
              'name': '测试dm转Oracle',
              'pid': '10',
              'children': null,
            },
          ],
        },
        {
          'id': '12',
          'name': 'Kingbase8',
          'pid': '-1',
          'children': [
            {
              'id': 'c933e63315ee4c64b70a5fa348c83059',
              'name': 'xp_1111_test1',
              'pid': '12',
              'children': null,
            },
            {
              'id': 'a5b761ecb97a4930a8ecae16219c6fd9',
              'name': 'xp_add_1',
              'pid': '12',
              'children': null,
            },
            {
              'id': '12c96463ed464a7da6c0696cf272b6e0',
              'name': 'xp_test_kingbase8_22234',
              'pid': '12',
              'children': null,
            },
            {
              'id': '14f306c4ccc94ddfb4b0cafcb79c3982',
              'name': 'XP_TEST_1',
              'pid': '12',
              'children': null,
            },
            {
              'id': '9a68cbf199534e28a6c8779036977edb',
              'name': '金仓C',
              'pid': '12',
              'children': null,
            },
            {
              'id': '6097a77761d64e83a3a481fa9b4e000f',
              'name': '金仓m',
              'pid': '12',
              'children': null,
            },
            {
              'id': '6941881032414bd2858a64efcf36db5e',
              'name': 'sunKing',
              'pid': '12',
              'children': null,
            },
            {
              'id': '91b67d1b3d9049c597544302f4e0053a',
              'name': 'qztable',
              'pid': '12',
              'children': null,
            },
            {
              'id': '645aadeb3d5542dfb71801c5600ef857',
              'name': 'king8',
              'pid': '12',
              'children': null,
            },
          ],
        },
      ],
    },
    ];
  },

  methods: {
    treeSelectChange(result) {
      console.log('tree-select change => ', JSON.parse(JSON.stringify(this.treeSelectValue)), JSON.parse(JSON.stringify(result)));
    },

    onTreeSelect(result) {
      console.log('tree selectItem => ', JSON.parse(JSON.stringify(result)));
    },
  },

};
</script>

<style lang="scss" scoped>
.tree-select-container {
  width: 100%;
}
</style>
